import { Navigate, useRoutes} from "react-router-dom";
import lazyLoad from "@/hooks/lazyLoad";
import React,{ Suspense } from "react";
import ProtectedRoute from "@/components/ProtectedRoute/ProtectedRoute";

// 基础路由
export const rootRouter = [
  {
    path: '/',
    element: <Navigate to="/login" />  // 重定向 
  },
  {
    path: '/login',
    element: lazyLoad(React.lazy(() => import('@/views/login/login'))),
    meta: {
      requireAuth: false,
      title: '首页',
      key: 'login'
    }
  },
  {
    path: '/home',
    element:lazyLoad(React.lazy(() => import("@/views/home/home")))
    // element: (
    //   <ProtectedRoute>
    //     <Suspense fallback={<div>Loading...</div>}>
    //       {lazyLoad(React.lazy(() => import("@/views/home/home")))}
    //     </Suspense>
    //   </ProtectedRoute>
    // )

    
  }
];

// useRoutes 这个方法中react中的hook函数,只能放在react组件或者react hook函数中使用
const Router = () => {
  return useRoutes(rootRouter);
};

export default Router;